
import Taro, { Component } from '@tarojs/taro'
import {View, Text, Image} from '@tarojs/components'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'

import FooterInfo from "../../components/FooterInfo";
import FooterMenu from "../../components/FooterMenu";


import './index.less'

import {getAvatar, getRuntime, servicePhoneNumber, userType, phoneNumPartOf, companyName, userTypeObj} from "../../utils/common";

import avatar from '../../assets/img/icon_79.png'
import icon_22 from '../../assets/img/icon_22.png'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class MineIndex extends Component<IHomeProps> {

  constructor(props) {
    super(props)
  }

  state = {
    userInfo: {},
    isLogin: true,
    teamNum: 0,
    cardNum: 0
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '我的'})
    let userInfo = getRuntime().getUserInfo()
    if(!userInfo) {getRuntime().navigateTo('/pages/other/bindPhone'); return false;}
    this.getUserInfoFromHost()
  }

  componentDidShow(): void {
    // this.getUserInfoFromHost()
    this.getUserCards()
  }

  getUserInfoFromHost() {
    let { userStore } = this.props.stores
    userStore.getUserInfo({
      callback: res => {
        // getRuntime().setStorage('user', res) // 此处返回的信息未带token
        if(res&&res.userState===0){
          getRuntime().showToast('您的登录已过期或是已被禁用，请重新登录~')
          setTimeout(() => {
            getRuntime().navigateTo('/pages/other/bindPhone')
          }, 2000)
        }
        if(res&&!res.isActive){
          getRuntime().showToast('您的账号异常，请联系客服处理~')
          setTimeout(() => {
            getRuntime().navigateTo('/pages/other/bindPhone')
          }, 2000)
        }
        res.token = getRuntime().getUserInfo().token
        getRuntime().setUserInfo(res)
        this.setState({
           userInfo: res,
        }, () => {
           this.getUserSpreadById()
        })
      }
    })
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  makePhone() {
    getRuntime().makePhoneCall(servicePhoneNumber)
  }

  getUserSpreadById(): void {
    let { userInfo } = this.state
    console.log(userInfo)
    let { userStore } = this.props.stores
    userStore.getUserSpreadById({
      formUserId: userInfo.id,
      callback: res => { this.setState({ teamNum: res.teamNum || 0 }) }
    })
  }

  getUserCards() {
    let { userStore } = this.props.stores
    userStore.getUserCards({
      callback: res => {
        this.setState({
          cardNum: res.items.length || 0
        })
      }
    })
  }

  // 退出登录
  logout() {
    Taro.showModal({
      title: '您确定要退出登录吗?',
      content: '退出登录',
      confirmText: '立即退出'
    }).then((res) => {
      if(res.confirm) {
        let { userStore } = this.props.stores
        userStore.logout({
          callback: () => {
            Taro.removeStorageSync('user')
            getRuntime().showToast('退出登录成功~')
            setTimeout(() => {
              getRuntime().navigateTo('/pages/index/index')
            },1000)
          }
        })
      }
    })
  }

  render() {
    let { isLogin, userInfo, teamNum, cardNum } = this.state
    let vipLevel = userInfo.vipLevel
    let vipLevelText = '普通会员'
    userTypeObj.map(item => {
      if(item.id === vipLevel) { vipLevelText = item.title }
    })
    return (
      <View className='mine-index'>
        <View className='mine-index__header'>
          <Image className='mine-index__avatar' src={getAvatar(userInfo.avatar)} />
          {
            !isLogin&&
            <View className='info'>
               <View className='btn-login'>
                  立即登录
               </View>
               <View className='hello'>Hello， 欢迎来到{companyName}!</View>
            </View>
          }
          {
            isLogin&&
            <View className='info'>
               <View className='username font-bold'>{userInfo.nickName} <Text className='leval'>{vipLevelText}</Text></View>
               <View className='phone'>{phoneNumPartOf(userInfo.phoneNumber)}</View>
            </View>
          }
          {
            // 业务员才能分享
            userInfo.vipLevel===2&& <Image className='mine-index__code' src={icon_22} onClick={this.link.bind(this, '/pages/share/index')} />
          }
        </View>
        {
          userInfo.vipLevel>0&&
          <View>
             <View className='line-menu'>
                <View className='line line-link' onClick={this.link.bind(this, '/pages/mine/profit')}>
                   <View className='line__title'>我的收益</View>
                   <View className='line__con'>{userInfo.commision&&userInfo.commision+'元'}</View>
                </View>
               {
                 userInfo.vipLevel===2&&
                 <View className='line line-link' onClick={this.link.bind(this, '/pages/mine/team')}>
                    <View className='line__title'>我的合伙人</View>
                    <View className='line__con'>{teamNum}人</View>
                 </View>
               }
               {
                 userInfo.vipLevel!==3&&
                 <View className='line line-link' onClick={this.link.bind(this, '/pages/mine/profitOrder')} style={{display: 'none'}}>
                    <View className='line__title'>统计报表</View>
                    <View className='line__con' />
                 </View>
               }
             </View>
             <View className='interval' />

             <View className='line-menu'>
              {/*  {
                 !userInfo.isVerify&&
                 <View className='line line-link' onClick={this.link.bind(this, '/pages/card/auth')}>
                    <View className='line__title'>实名认证</View>
                    <View className='line__con color-theme'>未认证</View>
                 </View>
               }
               {
                 userInfo.isVerify&&
                 <View className='line line-link'>
                    <View className='line__title'>实名认证</View>
                    <View className='line__con color-theme'>已认证</View>
                 </View>
               } */}
                <View className='line line-link' onClick={this.link.bind(this, '/pages/mine/card')}>
                   <View className='line__title'>储蓄卡</View>
                   <View className='line__con '>{cardNum}张</View>
                </View>
               {/* <View className='line line-link' onClick={this.link.bind(this, '/pages/card/creditCard')}>
            <View className='line__title'>信用卡</View>
            <View className='line__con '>0张</View>
          </View>*/}
             </View>
             <View className='interval' />
          </View>
        }


        <View className='line-menu'>
          <View className='line line-link' onClick={this.link.bind(this, '/pages/mine/edit')}>
            <View className='line__title'>编辑资料</View>
            <View className='line__con' ></View>
          </View>
          <View className='line line-link' onClick={this.link.bind(this, '/pages/mine/editPhone')}>
            <View className='line__title'>修改手机号</View>
            <View className='line__con' >{phoneNumPartOf(userInfo.phoneNumber)}</View>
          </View>
        {/*  <View className='line line-link' onClick={this.link.bind(this, '/pages/mine/setPasswordPhone')}>
            <View className='line__title'>修改密码</View>
            <View className='line__con ' />
          </View>*/}
          <View className='line line-link' onClick={this.makePhone.bind(this)}>
            <View className='line__title'>客服热线</View>
            <View className='line__con' >{ servicePhoneNumber }</View>
          </View>
          <View className='line line-link' onClick={this.link.bind(this, '/pages/login/qrcode')}>
            <View className='line__title'>关注我们</View>
          </View>
        </View>
        <View className='interval' />

        <View className='logout' onClick={this.logout.bind(this)}>退出账号</View>

        <FooterInfo />

        <View className='footer-block' />
        <FooterMenu currentMenu='mine' />

      </View>
    )
  }
}
export default MineIndex
